<template>
	<view class="placeOrder">
		<view class="address">
			<view class="address-left">
				<view class="address-left-top">
					<text class="user-name">小明</text>
					<text class="phone">123456789106</text>
					<text class="default-address">默认地址</text>
				</view>
				<view class="address-left-bottom">
					<text>四川省</text>
					<text>成都市</text>
					<text>武侯区</text>
					<text>石羊街道交子大道177号中海国际中心A座13楼1303</text>
				</view>
			</view>
			<view class="address-right">
				<image class="address-right-img" src="../../../static/youjiantou1.png" mode=""></image>
			</view>
		</view>
	    <view class="order">
	    	<view class="order-title">
	    		<image class="order-title-img" src="../../../static/mine/shop/dianpu.png" mode=""></image>
				<text class="title">南极人洗手液</text>
	    	</view>
			<view class="commodity">
				<image style="width: 78px;height: 78px;border-radius: 10rpx;" src="../../../static/goods_avatar.png" mode=""></image>
				<view class="commodity-middle">
					<text class="describe">植物护洗手液免洗漱75%酒精消毒专用抓紧你用</text>
					<text class="specifications">免洗手凝胶80ml</text>
					<view class="commodity-middle-box">
						<text>免运费</text>
						<text>私定精选</text>
					</view>
				</view>
				<view class="commodity-right">
					<text>3000积分</text>
				</view>
			</view>
			<view class="num-box">
				<view class="num-box-left">
					<text class="convert">兑换数量</text>
					<view class="remarks">
						<text>订单备注</text>
						<text>选填，请提出合理需求</text>
					</view>
				</view>
					<view class="goods-num-box">
						<view class="goods-num">
							<text>1</text>
						</view>
					</view>
			</view>
			<view class="subtotal">
				<text>共1件</text>
				<text>小计：</text>
				<text>3000积分</text>
			</view>
		</view>
		<view class="placeOrder-box">
			<text>共1件</text>
			<text>合计:</text>
			<text>3000积分</text>
			<text @click="submit">提交订单</text>
		</view>
		<view class="model" v-show="isModel">
			<view class="tips">
				<view class="tips-title">
					商品退换货提示
				</view>
				<view class="tips-des">
					非商品质量问题无法进行换货及退货
					退款服务
				</view>
				<view class="btn">
					我知道了
				</view>
			</view>
			<view class="success-box">
				<view class="success">
					<text class="success-box-title">恭喜您成功兑换商品</text>
					<image src="../../../static/mine/shop/success_shop.png" mode=""></image>
					<text class="specs">Apple iPhone 13 128GB 蓝色支持移动联通电信5G 双卡联通电信5G 双卡</text>
				</view>
				<view class="success-btn">
					<view class="share" @click="sure">
						分享好友赚积分
					</view>
					<view class="sure" @click="sure">
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isModel:false,//默认蒙版成不显示
			}
		},
		methods: {
			//提交订单
			submit(){
				this.isModel = true
			},
			sure(){
				uni.reLaunch({
					url:'../mine'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.model{
		width: 100%;
		height: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: rgba(142,141,140,0.82);
		.tips{
			width: 560rpx;
			height: 310rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 10rpx;
			margin: 100rpx auto;
			display: flex;
			flex-direction: column;
			.tips-title{
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				width: 100%;
				text-align: center;
				margin: 40rpx 0 5rpx;
				color: #333333;
			}
			.tips-des{
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				padding: 15rpx 20rpx;
				color: #999999;
				border-bottom: 1px solid #F2F2F2;
			}
			.btn{
				font-size: 18px;
				height: 100%;
				font-family: Source Han Sans CN;
				font-weight: 400;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #FF7200;
			}
		}
		.success-box{
			width: 670rpx;
			height: 600rpx;
			background: #FFFFFF;
			opacity: 1;
			border-radius: 10rpx;
			margin: 10rpx auto;
			.success-btn{
				display: flex;
				height: 94rpx;
				line-height: 94rpx;
				text-align: center;
				.share{
					flex: 1;
					border-right: 2px solid #F2F2F2;
					align-self: center;
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF7200;
					height: 100%;
				}
				.sure{
					height: 100%;
					flex: 1;
					align-self: center;
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF0000;
				}
			}
			.success{
				padding: 0 150rpx;
				display: flex;
				height: 500rpx;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-bottom: 1px solid #F2F2F2;
				.success-box-title{
					font-size: 36rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
				image{
					width: 318rpx;
					height: 228rpx;
					margin: 52rpx 0 24rpx;
				}
				.specs{
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					line-height: 44rpx;
					color: #333333;
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
	.placeOrder-box{
		width: 100%;
		height: 88rpx;
		background: #FFFFFF;
		opacity: 1;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text{
			margin-right: 20rpx;
		}
		text:nth-child(1){
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
		}
		text:nth-child(2){
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
		}
		text:nth-child(3){
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #FF7200;
		}
		text:nth-child(4){
			width: 158rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			background: linear-gradient(335deg, #FF7200 0%, #FFAA00 100%);
			opacity: 1;
			border-radius: 34rpx;
			color: #ffffff;
			font-size: 28rpx;
		}
	}
.placeOrder{
	width: 100vw;
	height: 100vh;
	padding: 0 40rpx;
	.address{
		margin-top: 20rpx;
		width: 100%;
		height: 166rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		margin-bottom: 40rpx;
		.address-left{
			flex: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			margin: 0 30rpx;
			.address-left-top{
				display: flex;
				height: 66rpx;
				align-items: center;
				text{
					margin-right: 20rpx;
				}
				.user-name{
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
					opacity: 1;
				}
				.phone{
					font-size: 32rpx;
					font-weight: 400;
					color: #999999;
				}
				.default-address{
					display: inline-block;
					width: 130rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					background: #FFFFFF;
					border: 1px solid #FF7200;
					opacity: 1;
					border-radius: 4rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FF7200;
				}
			}
			.address-left-bottom{
				text{
					margin-right: 20rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
			}
		}
		.address-right{
			width: 60rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.address-right-img{
				width: 16rpx;
				height: 32rpx;
			}
		}
	}
	.order{
		width: 100%;
		height: 600rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		.order-title{
			display: flex;
			padding: 50rpx 30rpx 26rpx;
			align-items: center;
			.order-title-img{
				width: 50rpx;
				height: 46rpx;
				margin-right: 18rpx;
			}
			.title{
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
			}
		}
		.commodity{
			height: auto;
			padding-left: 30rpx;
			display: flex;
			.commodity-middle{
				display: flex;
				flex-direction: column;
				margin: 0 15rpx;
				flex: 1;
				.describe{
					word-break: break-all;
					text-overflow: ellipsis;
					overflow: hidden;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
				.specifications{
					margin: 10rpx 0;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}
				.commodity-middle-box{
					display: flex;
					text{
						padding: 5rpx 8rpx;
						height: 30rpx;
						line-height: 20rpx;
						text-align: center;
						background: #FFFFFF;
						border: 1px solid #FF7200;
						opacity: 1;
						border-radius: 8rpx;
						color:#FF7200 ;
						font-size: 20rpx;
						margin-left: 28rpx;
					}
				}
			}
			.commodity-right{
				width: 140rpx;
				display: flex;
				flex-direction: column;
				text:first-child{
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #666666;
				}
				text:last-child{
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					text-align: right;
				}
			}
		}
		.num-box{
			margin-top: 60rpx;
			display: flex;
			.num-box-left{
				display: flex;
				flex-direction: column;
				margin-left: 80rpx;
				.convert{
					font-size: 32rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					opacity: 1;
					margin-bottom: 40rpx;
				}
				.remarks{
					display: flex;
					text:first-child{
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						opacity: 1;
						margin-bottom: 40rpx;
					}
					text:last-child{
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						margin-left: 20rpx;
					}
				}
			}
			.goods-num-box {
				margin-left: 40rpx;
				width: 128rpx;
				height: 46rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
			
				.goods-image {
					width: 46rpx;
					height: 44rpx;
					text-align: center;
					line-height: 44rpx;
					// border: 1rpx solid #CFCFCF;
					font-size: 38rpx;
				}
			
				.goods-num {
					margin-left: 40rpx;
					text-align: center;
					line-height: 26rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					border: 1rpx solid #CFCFCF;
					width: 58rpx;
					height: 26rpx;
					background: #D6D6D6;
					opacity: 1;
				}
			}
		}
		.subtotal{
			margin-top: 20rpx;
			display: flex;
			justify-content: flex-end;
			text:first-child{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				margin-right: 12rpx;
			}
			text:nth-child(2){
				color:#333333;
				font-size: 24rpx;
			}
			text:last-child{
				color: #FF7200;
				font-size: 28rpx;
			}
		}
	}
}
</style>
